<template>
    <div>
        <van-swipe :banner ='banner'></van-swipe>
        <div class="goods-view" ref="view">
            <category class="category" :categoryList = 'list' @selectCategory = "Gogoods"></category>
            <goods :list ='goodsList' class="goods-list" ref="goods"></goods>
        </div>
    </div>
</template>

<style scoped lang="stylus">
    .goods-view
        height:100%
        display:flex
        flex-direction:row
        overflow-y:hidden
        .goods-list
            height:100%
            width:100%
            overflow-y:auto
    .category
        height:100%
        padding-bottom:50px
        overflow-y:auto
</style>

<script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue"
import tween from '@tweenjs/tween.js'
import Swipe from "../components/swipe/swipe.vue"
import category from "../components/goods/category.vue"
import goods from "../components/goods/goods.vue"
import { Card } from 'vant'
export default {
    name: "home",
    components: {
        vanSwipe: Swipe,
        category,
        goods,
        vanCard:Card
    },
    data: () => ({
        banner:[],
        list:[],
        goodsList:[]
    }),
    methods:{
        Gogoods(e){
            const _goodsContainer = this.$refs.goods.$el
            const h  = _goodsContainer.children[e].offsetTop-_goodsContainer.offsetTop;
            _goodsContainer.scrollTop = h
            // console.log("差值",_goodsContainer.children[e].offsetTop-_goodsContainer.offsetTop);
            // tween.get(_goodsContainer).to({offsetTop:h},1500)
        }
    },
    beforeCreate() {
        this.axios.get("./data/list.json").then(({data}) => {
            this.banner = data.banner
            this.goodsList = data.data
            for (const item of data.data){
                this.list.push(item.category)
            }
        });
    },
    beforeUpdate(){
        this.$refs.view.style.height = this.$store.state.viewHeight
    }
};
</script>
